package com.wake.mycomposebook.ui.home.layouts

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.filled.FavoriteBorder
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.constraintlayout.compose.ConstraintLayout
import androidx.constraintlayout.compose.Dimension
import com.wake.data.DemoDataProvider

/**
 *@author created by WA03675
 *@date  2022-04-18 15:41
 *@des
 */
@Composable
fun MyConstrainLayout() {
    Column(Modifier.verticalScroll(rememberScrollState()), content = {
        Card1()
        Card2()
        Card3()
        Card4()
    })
}


@Composable
fun Card1() {
    ConstraintLayout(
        Modifier
            .fillMaxWidth()
            .padding(10.dp, 15.dp)
    ) {
        val (headerImg, title, content, subContent, collect) = createRefs()
        Image(
            painter = painterResource(id = DemoDataProvider.item.imageId),
            contentDescription = null,
            Modifier
                .size(100.dp)
                .clip(CircleShape)
                .constrainAs(headerImg) {
                    top.linkTo(parent.top)
                    bottom.linkTo(parent.bottom)
                    absoluteLeft.linkTo(parent.absoluteLeft)
                },
            contentScale = ContentScale.Crop
        )

        Text(
            text = "AweSomeList AweSomeList",
            Modifier
                .constrainAs(title) {
                    top.linkTo(headerImg.top)
                    absoluteLeft.linkTo(headerImg.end, margin = 10.dp)
                    absoluteRight.linkTo(parent.end, margin = 40.dp)
                }
                .width(60.dp),
            maxLines = 2,
            style = MaterialTheme.typography.titleMedium
        )


        Text(
            text = "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",
            Modifier
                .constrainAs(content) {
                    top.linkTo(title.bottom)
                    absoluteLeft.linkTo(title.absoluteLeft)
                    absoluteRight.linkTo(title.absoluteRight)
                    width = Dimension.fillToConstraints
                },
            maxLines = 2,
            overflow = TextOverflow.Ellipsis,
            style = MaterialTheme.typography.bodyMedium
        )

        Text(
            text = "come socxxxx",
            Modifier
                .constrainAs(subContent) {
                    top.linkTo(content.bottom)
                    bottom.linkTo(parent.bottom)
                    absoluteLeft.linkTo(title.absoluteLeft, margin = 10.dp)
                    absoluteRight.linkTo(title.absoluteRight, margin = 10.dp)
                }
                .width(60.dp),
            maxLines = 2,
            style = MaterialTheme.typography.bodySmall
        )

        val state = remember {
            mutableStateOf(false)
        }
        IconToggleButton(
            checked = state.value,
            onCheckedChange = { state.value = !state.value },
            modifier = Modifier.constrainAs(collect) {
                top.linkTo(parent.top)
                absoluteRight.linkTo(parent.absoluteRight, margin = 15.dp)
            }
        ) {
            Icon(imageVector = if (state.value) Icons.Default.FavoriteBorder else Icons.Default.Favorite, contentDescription = null)
        }

    }
}


@Composable
fun Card2() {
    val item = DemoDataProvider.item
    ConstraintLayout(
        modifier = Modifier
            .padding(top = 20.dp)
            .fillMaxWidth()
            .height(100.dp)
    ) {
        val (title, content, like) = createRefs()

        Image(
            painter = painterResource(id = item.imageId),
            contentDescription = null,
            contentScale = ContentScale.Crop
        )

        Text(text = "Title", color = Color.White, modifier = Modifier.constrainAs(title) {
            linkTo(start = parent.start, startMargin = 10.dp, end = parent.end, endMargin = 10.dp)
            top.linkTo(parent.top, 20.dp)
            width = Dimension.fillToConstraints
        })


        Text(text = "Content", color = Color.White, modifier = Modifier.constrainAs(content) {
            linkTo(start = title.start, startMargin = 10.dp, end = title.end, endMargin = 10.dp)
            top.linkTo(parent.top, 20.dp)
            width = Dimension.fillToConstraints
        })

        val state = remember {
            mutableStateOf(false)
        }

        IconToggleButton(checked = state.value, onCheckedChange = { state.value = !state.value },
            Modifier.constrainAs(like) {
                absoluteRight.linkTo(parent.end)
                top.linkTo(parent.top)
            }
        ) {
            androidx.compose.material.Icon(imageVector = Icons.Default.Favorite, contentDescription = null)
        }
    }
}

@Composable
fun Card3() {
}

@Composable
fun Card4() {
    val stateHeight = remember {
        mutableStateOf(false)
    }
    ConstraintLayout(
        Modifier
            .padding(20.dp)
            .background(
                Brush.linearGradient(listOf(Color.Yellow, Color.Red))
            )
            .fillMaxWidth()
            .height(if (stateHeight.value) 400.dp else 200.dp)

    ) {
        val (bt, img) = createRefs()

//        Button(onClick = { stateHeight.value = !stateHeight.value },
//            Modifier
//                .padding(10.dp)
//                .constrainAs(bt) {
//                    linkTo(start = parent.start, end = parent.end)
//                    top.linkTo(parent.top, margin = 20.dp)
//                }
//        ) {
//            Text(text = if (stateHeight.value) "收起" else "张开", color = Color.White)
//        }

        ExtendedFloatingActionButton(
            text = {
                Text(text = if (stateHeight.value) "收起" else "张开", color = Color.White)
            },
            onClick = {
                stateHeight.value = !stateHeight.value
            },
            Modifier
                .padding(10.dp)
                .constrainAs(bt) {
                    linkTo(start = parent.start, end = parent.end)
                    top.linkTo(parent.top, margin = 20.dp)
                }
        )


        Image(
            painter = painterResource(id = DemoDataProvider.item.imageId), contentDescription = null,
            Modifier
                .padding(top = 40.dp)
                .constrainAs(img) {
                    linkTo(start = parent.start, startMargin = 10.dp, end = parent.end, endMargin = 10.dp)
                    top.linkTo(bt.top, margin = 20.dp)
                    width = Dimension.fillToConstraints
                }
                .height(300.dp),
            contentScale = ContentScale.Crop
        )


    }
}

@Composable
@Preview
fun PreviewConstrainLayout() {
    MyConstrainLayout()
}
